<template>
    <form
        id="data-form-container"
        ref="form"
        @submit.prevent
        class="data-form-container"
    >
        <div class="form-item">
            <div class="input-area">
                <input
                    type="text"
                    maxlength="10"
                    v-model="formDataRef.nickName.value"
                    placeholder="用户昵称"
                />
                <span class="tip"
                    >{{ formDataRef.nickName.value.length }}/10</span
                >
            </div>
            <div class="error">{{ formDataRef.nickName.error }}</div>
        </div>
        <div class="form-item">
            <div class="text-area">
                <textarea
                    maxlength="300"
                    placeholder="输入内容"
                    v-model="formDataRef.content.value"
                ></textarea>
                <span class="tip"
                    >{{ formDataRef.content.value.length }}/300</span
                >
            </div>
            <div class="error">{{ formDataRef.content.error }}</div>
        </div>
        <div class="form-item">
            <div class="button-area">
                <button @click="handleSumbit" :disabled="isSubmittingRef">
                    {{ isSubmittingRef ? "提交中..." : "提交" }}
                </button>
            </div>
        </div>
    </form>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { showMessage } from "../PopMessage/showMessage";
import { PopMessageEnum } from "../Icon/types";
import { TypeFormData } from "~@/api/apiTypes";


// #region defineXxx
defineOptions({
name:'FormData',
inheritAttrs:false
});

//const props=defineProps({
//propA:{
//type:String,
//required:true
//},
//propB:{
//type:Number,
//default:1
//},
//propC:{
//type:String as PropType<MyType>,
//required:true
//},
//});


const formDataRef = ref<TypeFormData>({
    nickName: {
        value: "",
        error: "",
    },
    content: {
        value: "",
        error: "",
    },
});
const isSubmittingRef = ref(false);

const emit = defineEmits<{
    onSubmit: [formDataRef: TypeFormData, callback: Function];
}>();
//#endregion

const handleSumbit = (event:Event) => {
    console.log('in handleSumbit');
    
    event.preventDefault();
    formDataRef.value.nickName.error =
        formDataRef.value.nickName.value.length !== 0 ? "" : "请填写昵称";
    formDataRef.value.content.error =
        formDataRef.value.content.value.length !== 0 ? "" : "请填写内容";
    if (
        formDataRef.value.nickName.error.trim() ||
        formDataRef.value.content.error.trim()
    ) {
        return false;
    }
    isSubmittingRef.value = true;

    emit("onSubmit", formDataRef.value, (successMsg: string) => {
        showMessage({
            aMessageType: PopMessageEnum.SUCCESS,
            aContent: successMsg,
            aCallback:()=>{
                isSubmittingRef.value = false;
                formDataRef.value.content.value = "";
                formDataRef.value.nickName.value = "";
            }
        });
       
    });
};
</script>
<style lang="less" scoped>
.data-form-container {
    margin-bottom: 20px;
    overflow: hidden;
}
.form-item {
    margin-bottom: 8px;
    position: relative;
}
.input-area {
    position: relative;
    width: 50%;
}
.text-area{
    position: relative;
}
.tip {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #b4b8bc;
        font-size: 12px;
}
input,
textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px dashed @gray;
    outline: none;
    color: @words;
    font-size: 14px;
    border-radius: 4px;
    &.focus {
        border-color: @primary;
    }
}
input {
    padding: 0 15px;
    height: 40px;
}
textarea {
    resize: none;
    padding: 8px 15px;
    height: 120px;
}
.error {
    margin-top: 6px;
    color: @danger;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
}
.button-area{
    margin: 0 auto;
    width: 40%;
}
button{
    position: relative;
    cursor: pointer;
    border: none;
    outline: none;
    width: 100%;
    height:34px;
    color:#fff;
    border-radius: 4px;
    background: @primary;
    &:hover{
        background: darken(@primary,10%);
    }
    &:disabled{
        background: lighten(@primary,20%);
        cursor: not-allowed;
    }
}
</style>
